<template>
    <el-card>
        <el-form inline :disabled="!disabled">
            <el-form-item label="一级分类">
                <el-select v-model="category1Id" placeholder="请选择" @change="c1Handler">
                    <el-option 
                    v-for="c1 in c1List"
                    :value="c1.id" 
                    :key="c1.id"
                    :label="c1.name"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="二级分类" >
                <el-select  v-model="category2Id" placeholder="请选择" @change="c2Handler">
                    <el-option 
                    v-for="c2 in c2List"
                    :value="c2.id" 
                    :key="c2.id"
                    :label="c2.name"
                    >
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="三级分类">
                <el-select  v-model="category3Id" placeholder="请选择">
                    <el-option 
                    v-for="c3 in c3List"
                    :value="c3.id" 
                    :key="c3.id"
                    :label="c3.name"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
     
        </el-form>
    </el-card>
</template>

<script>
import { mapActions ,mapState} from 'vuex';
export default {
    name: "VCategory",
    props:['disabled'],
    data() {
        return {
            category1Id:undefined,
            category2Id:undefined,
            category3Id:undefined
        }
    },
    methods: {
        ...mapActions('category',['getCategory1List','getCategory2List','getCategory3List']),
        c1Handler(){
            this.getCategory2List(this.category1Id)
            //清除下拉的数据
            this.category2Id=undefined
            this.category3Id=undefined
        },
        c2Handler(){
            this.getCategory3List(this.category2Id)
            this.category3Id=undefined
        }
    },
    computed:{
        ...mapState('category',['c1List','c2List','c3List'])
    },
    watch:{
        //三级分类变化触发自定义事件
        category3Id(val){
                this.$emit('getId',{category1Id:this.category1Id,category2Id:this.category2Id,category3Id:val}) 
        }
    },
    mounted() {
        this.getCategory1List()
    },
}
</script>

<style lang="less" scoped>

</style>